<template>
  <div class="schR_page_warp">
    <div v-show="!isShowAddressSelect">
      <contentPage :is-screen="true">
        <pageHeader :show-back="true" ads-type="1" @openSelectAds="openSelectAds" />
        <div class="schR_school">
          建平实验小学[枣庄校区]
        </div>
        <div class="schR_school_title">
          <img class="schR_title_img" src="../../assets/icon/catalog.png" alt="">
          <div class="schR_title_text">学校对口校区房价一览</div>
        </div>
        <div class="schR_warp2_li_center">
          <div class="schR_warp2_left">
            <table class="schR_table">
              <tr>
                <th class="schR_table_th schR_table_th1">小区名称</th>
                <th class="schR_table_th schR_table_th2">小区最低价</th>
                <th class="schR_table_th schR_table_th3">二房最低价</th>
                <th class="schR_table_th schR_table_th4">三房最低价</th>
              </tr>
              <tr v-for="(item,index) in 10" :key="index">
                <td class="schR_table_td">小区名字</td>
                <td class="schR_table_td">200</td>
                <td class="schR_table_td">300</td>
                <td class="schR_table_td">400</td>
              </tr>
            </table>
          </div>
          <div class="schR_warp2_right">
            <div id="schoolEacher" class="schR_Eacher" />
          </div>
        </div>

      </contentPage>
    </div>

    <div v-show="isShowAddressSelect">
      <address-select @closeSelectCity="closeSelectAds" />
    </div>
  </div>
</template>

<script>
import contentPage from '../../components/content_page'
import pageHeader from '../../components/page_header'
import addressSelect from '../../components/addressSelect'

export default {
  name: 'SchoolDetail',
  components: { contentPage, pageHeader, addressSelect },
  data() {
    return {
      isShowAddressSelect: false,
    }
  },
  computed: {},
  created() {
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    closeSelectAds() {
      this.isShowAddressSelect = !this.isShowAddressSelect
    },
    openSelectAds() {
      this.isShowAddressSelect = !this.isShowAddressSelect
    },
    /** 绘制eacher图 **/
    drawChart() {
      const schoolEacher = document.getElementById('schoolEacher') // 对应地使用ByClassName
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(schoolEacher)
      myChart.setOption({
        title: {
          subtext: '小区最低价',
          subtextStyle: {
            color: '#000000',
            fontSize: 14,
            fontStyle: 'normal',
            fontWeight: 'bold',
          },
          x: 4,
          y: -10,
        },
        grid: {
          left: '3%',
          top: '4%',
          right: '20%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'value',
            splitLine: { show: false },
            axisLine: { show: false },
            axisTick: { show: false },
            show: false,
          },
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            splitLine: { show: false },
            axisLine: { show: false },
            position: 'left',
            nameLocation: 'nameGap',
            data: ['北京', '北京', '哈尔滨', '黑龙江', '北京', '北京', '北京', '北京'],
          },
        ],
        series: [
          {
            type: 'bar',
            // barMaxWidth: '40',
            barWidth: '14',
            // barGap: '40%', /* 多个并排柱子设置柱子之间的间距*/
            // barCategoryGap: '80%', /* 多个并排柱子设置柱子之间的间距*/
            label: {
              show: true,
              position: 'right',
            },
            data: [10, 20, 30, 40, 50, 60, 70, 400],
            itemStyle: {
              normal: {
                barBorderRadius: false,
                color: (params) => {
                  const currentValue = params.value
                  if (currentValue > 0 && currentValue <= 10) { return '#F08080' }
                  if (currentValue > 10 && currentValue <= 30) { return '#FF6347' }
                  if (currentValue > 30 && currentValue <= 50) { return '#FF4500' }
                  if (currentValue > 50 && currentValue <= 80) { return '#B22222' }
                  if (currentValue > 80 && currentValue <= 100) { return '#8B3A3A' }
                  if (currentValue > 100) { return '#FF0000' }
                  if (currentValue > -10 && currentValue <= 0) { return '#7FFFD4' }
                  if (currentValue > -30 && currentValue <= -10) { return '#76EEC6' }
                  if (currentValue <= -30) { return '#66CDAA' }
                },
              },
            },
          },

        ],
      })
      window.onresize = myChart.resize
    },
  },
}
</script>

<style scoped lang="scss">
@import "../../assets/style/base";
.schR_page_warp{
  .schR_school{
    font-size: pxTorem(34px);
    font-weight: 600;
    padding: pxTorem(15px) pxTorem(30px);
  }
  .schR_school_title{
    font-size: pxTorem(34px);
    display: flex;
    align-items: center;
    padding: pxTorem(15px) pxTorem(30px);
    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    margin-bottom: pxTorem(20px);
    .schR_title_img{
      width: pxTorem(60px);
      height: pxTorem(60px);
      margin-right: pxTorem(10px);
    }
    .schR_title_text{}
  }
}
.schR_warp2_li_center{
  display: flex;
  margin-bottom: pxTorem(24px);
  .schR_warp2_left{
    flex: 1;
    .schR_table{
      font-size: pxTorem(14px);
      .schR_table_th{
      }
      .schR_table_th1{
        width: pxTorem(120px);
      }
      .schR_table_th2{
        width: pxTorem(90px);
      }
      .schR_table_th3{
        width: pxTorem(90px);
      }
      .schR_table_th4{
        width: pxTorem(90px);
      }
      .schR_table_th5{
        width: pxTorem(90px);
      }
      .schR_table_td{
        text-align: center;
        padding: pxTorem(8px) 0;
      }
    }
  }
  .schR_warp2_right{
    width: pxTorem(360px);
    .schR_Eacher{
      width: pxTorem(360px);
      height: pxTorem(600px);
    }
  }
}

</style>
